import React, { useEffect, useState, useRef } from 'react'
import { Box } from '$components';
import './left-bottom.less';
import { communtity_data } from '../constants/index'

function VideoCarousel({ communtityInfo }) {
    const [data, setData] = useState([]);
    const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
    const videoRef = useRef(null);
    const timerRef = useRef(null);

    // 模拟视频数据
    const videoList = [
        { url: '/assets/video/protect.mp4', title: '监控点1' },
    ];

    useEffect(() => {
        // 清理之前的定时器
        if (timerRef.current) {
            clearInterval(timerRef.current);
        }

        // 设置新的定时器
        if (videoList.length > 1) {
            timerRef.current = setInterval(() => {
                setCurrentVideoIndex((prevIndex) => (prevIndex + 1) % videoList.length);
            }, 5000); // 5秒切换一次
        }

        // 组件卸载时清理定时器
        return () => {
            if (timerRef.current) {
                clearInterval(timerRef.current);
            }
        };
    }, []);

    // 处理视频播放结束
    const handleVideoEnded = () => {
        if (videoList.length > 1) {
            setCurrentVideoIndex((prevIndex) => (prevIndex + 1) % videoList.length);
        }
    };

    // 处理视频错误
    const handleVideoError = () => {
        console.error('视频播放出错');
        if (videoList.length > 1) {
            setCurrentVideoIndex((prevIndex) => (prevIndex + 1) % videoList.length);
        }
    };

    return <Box title={"慧眼守护"} bodyPaddingTop={1}>
        <div className="video-carousel-container">
            {videoList.length > 0 ? (
                <div className="video-wrapper">
                    <video
                        ref={videoRef}
                        key={videoList[currentVideoIndex]?.url}
                        className="video-player"
                        autoPlay
                        muted
                        loop={videoList.length === 1}
                        onEnded={handleVideoEnded}
                        onError={handleVideoError}
                    >
                        <source src={videoList[currentVideoIndex]?.url} type="video/mp4" />
                        您的浏览器不支持视频播放
                    </video>
                    {videoList.length > 1 && (
                        <div className="video-indicators">
                            {videoList.map((_, index) => (
                                <span
                                    key={index}
                                    className={`indicator ${index === currentVideoIndex ? 'active' : ''}`}
                                    onClick={() => setCurrentVideoIndex(index)}
                                />
                            ))}
                        </div>
                    )}
                </div>
            ) : (
                <div className="no-video">暂无视频</div>
            )}
        </div>
    </Box>
}

export default VideoCarousel;


